<template>
    <div class="home">
        <home-header></home-header>
        <Swiper :swiperList="swiperList"></Swiper>
        <home-icon :iconsList="iconsList"></home-icon>
        <home-location ></home-location>
        <home-activty></home-activty>
        <home-hot :hotList="hotList"></home-hot>
        <home-like :likeList="likeList"></home-like>
        <home-vacation :vacationList="vacationList"></home-vacation>
    </div>
</template>

<script>
import HomeHeader from './pages/Header'
import Swiper from './pages/Swiper'
import HomeIcon from './pages/Icon'
import HomeLocation from './pages/Location'
import HomeActivty from './pages/Activity'
import HomeHot from './pages/Hot'
import HomeLike from './pages/Like'
import HomeVacation from './pages/Vacation'
import {mapState} from 'vuex'
export default {
    components:{
        HomeHeader,
        Swiper,
        HomeIcon,
        HomeLocation,
        HomeActivty,
        HomeHot,
        HomeLike,
        HomeVacation
    },
    computed:{
        ...mapState({
            'cityname':"city"
        })
    },
    data () {
		return {
			swiperList:[],
			iconsList:[],
			hotList:[],
			likeList:[],
			vacationList:[],
			changeCity:''
		}
	},
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
               this.$http.get('./js/data.json').then(response => {
                    const data = response.data.data;
                    data.forEach((item,index) => {
                        if(this.cityname == item.city)
                        {
                            this.changeCity =item.city
                            this.swiperList=item.swiperList;
					        this.iconsList=item.iconsList;
					        this.hotList=item.hotList;
					        this.likeList=item.likeList;
					        this.vacationList=item.vacationList;	 
                        }
                    });
					
                });
            }
        },
        activated(){
            console.log(1)
            if(this.cityname != this.changeCity){
                this.getData()
                this.changeCity = this.cityname
            }
            else{
                return
            }
        }
}
</script>

<style scoped>
.home{
    background-color: #f5f5f5;
}
</style>